<template>
  <baidu-map
    class="bm-view"
    :zoom="15"
    id="allmap"
    @click="getLocation"
    @ready="mapReady"
    ak="jUaoSz7mXfWK1MLcZhK70Ii0p8ecqzEB"
  >
  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="false"></bm-geolocation>
  <bm-auto-complete v-model="searchJingwei" :sugStyle="{ zIndex: 999999 }">
  </bm-auto-complete>
  <div style="display: flex; justify-content: center; margin: 15px">
      <bm-auto-complete v-model="searchJingwei" :sugStyle="{ zIndex: 999999 }">
      </bm-auto-complete>
      <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
    </div>
  <bm-marker v-for="(item, index) in locations" :key="index"
    :position="{lng: item.lng, lat: item.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
    <bm-label :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>  
  </bm-marker>
    <bm-marker
      v-if="infoWindowShow"
      :position="{ lng: longitude, lat: latitude }"
    >
      <bm-label
        content=""
        :labelStyle="{ color: 'red', fontSize: '24px' }"
        :offset="{ width: -35, height: 30 }"
      />
    </bm-marker>
    <bm-info-window
      :position="{ lng: longitude, lat: latitude }"
      :show="infoWindowShow"
      @close="infoWindowClose"
    >
      <p>纬度:{{ latitude }}</p>
      <p>经度:{{ longitude }}</p>
    </bm-info-window>
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 导航工具 -->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
   <!-- 添加测距工具按钮 -->
   <div style="position: absolute; top: 10px; right: 10px; z-index: 9999;">
      <el-button type="primary" @click="openDistanceTool">测距工具</el-button>
    </div>
  </baidu-map>
</template>
   
<script setup>
import { BmGeolocation } from "vue-baidu-map-3x";
import { BaiduMap } from "vue-baidu-map-3x";
import { BmScale } from "vue-baidu-map-3x";
import { BmNavigation } from "vue-baidu-map-3x";
import { BmCityList } from "vue-baidu-map-3x";
import { BmMarker } from "vue-baidu-map-3x";
import { BmLabel } from "vue-baidu-map-3x";
import { BmInfoWindow } from "vue-baidu-map-3x";
import { BmAutoComplete } from "vue-baidu-map-3x";
import DistanceTool from 'bmaplib.distancetool'
import { ref,onBeforeUnmount  } from "vue"; // 导入 ref

// 使用 ref 声明响应式数据
const locations = [
        { lng: 118.102, lat: 24.586,name:"万达" },
        { lng: 118.105, lat: 24.589,name:"大润发" },
        { lng: 118.108, lat: 24.592,name:"西苑餐厅" }
        // 其他位置...
      ];
const infoWindowShow = ref(false);
const longitude = ref("");
const latitude = ref("");
const searchJingwei = ref("");
const point = ref("");
let mapInstance = null;
let distanceTool = null;

function mapReady({ BMap, map }) {
  point.value = new BMap.Point(118.102, 24.586);
  map.centerAndZoom(point.value, 16);
  mapInstance = map
  distanceTool = new DistanceTool(map)
}

const openDistanceTool = () => {
    distanceTool && distanceTool.open()
}

onBeforeUnmount(() => {
  distanceTool && distanceTool.close()
})

// 定义获取位置的函数
function getLocation(e) {
  longitude.value = e.point.lng; // 使用 value 属性来访问 ref 中的值
  latitude.value = e.point.lat;
  infoWindowShow.value = true;
}

function infoWindowClose() {
  infoWindowShow.value = false;
}

function infoWindowOpen () {
  infoWindowShow.value = true;
}

async function getBaiduMapPoint() {
  const myGeo = new BMap.Geocoder();
  //逆地址解析
  myGeo.getPoint(searchJingwei.value, function (point) {
    if (point) {
      latitude.value = point.lat;
      longitude.value = point.lng;
      infoWindowShow.value = true;
      // 更新地图中心点
      mapInstance.setCenter(point);
    }
  });
}
</script>
  <style scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>